<template>
  <div>
    <div class="header">
      <h1 class="header-h1">管理系统</h1>
      <div class="header-list">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link header-title">
            {{username}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">
              <span @click="xiugai">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus">
              <span @click="zhuxiao">注销登陆</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="header-from">
        <el-input placeholder="请输入修改密码" v-model="password" class="header-from-input" show-password></el-input>
        <el-input placeholder="请再次输入密码" v-model="password1" show-password></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Api from "../../assets/js/api";
import Vue from "vue";
import { Button, Input, Dialog } from "element-ui";
Vue.use(Button, Input, Dialog);
export default {
  data() {
    return {
      username: sessionStorage.getItem("username"),
      dialogVisible: false,
      password: "",
      password1: ""
    };
  },
  mounted() {},
  methods: {
    zhuxiao() {
      // 注销登陆
      this.$http({
        url: Api.loginout,
        method: "GET"
      }).then(res => {
        console.log(res);
        sessionStorage.removeItem("username");
        sessionStorage.removeItem("position");
        this.$message({
          message: "退出成功",
          type: "success"
        });
        this.$router.push("/login");
      });
    },
    xiugai() {
      this.dialogVisible = true;
    },
    sumbit() {
      if (
        this.password != this.password1 ||
        this.password == "" ||
        this.password1 == ""
      ) {
        this.$message({
          message: "两次输入密码需要一致，且不能为空",
          type: "error"
        });
        return false;
      } else {
        let from = new FormData();
        from.append("password", this.password);
        this.$http({
          url: Api.password,
          method: "POST",
          data: from
        }).then(res => {
          console.log(res);
          if (res.data.status == 0) {
            this.$message({
              message: "修改成功，请重新登陆",
              type: "success"
            });
            sessionStorage.removeItem("username");
            sessionStorage.removeItem("position");
            this.$router.push("/login");
          } else {
            this.$message({
              message: "两次输入密码需要一致，且不能为空",
              type: "error"
            });
          }
        });
      }
      this.dialogVisible = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped>
.header {
  width: 100vw;
  height: 68px;
  background-color: #ffffff;
  position: fixed;
}
.header-h1 {
  font-size: 21px;
  line-height: 68px;
  color: #5c6287;
  margin-left: 30px;
  font-weight: bold;
  float: left;
}
.header-list {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
}
.header-title {
  font-size: 20px;
}
.header-from {
  padding: 10px;
  height: 60px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.header-from-input {
  margin-bottom: 10px;
}
</style>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

